<template>
    <div>
        <div class="operarea">
            <div class="seach" v-if="activeName == 'stk'">
                <el-input size="mini" v-model="seachForm.itemCode" clearable placeholder="款号" @keydown.enter.native="seachData"></el-input>
                <el-input size="mini" v-model="seachForm.bomCode" clearable placeholder="成品编码" @keydown.enter.native="seachData"></el-input>
                <el-input size="mini" v-model="seachForm.colour" clearable placeholder="颜色" @keydown.enter.native="seachData"></el-input>
                <el-input size="mini" v-model="seachForm.title" clearable placeholder="标题" @keydown.enter.native="seachData"></el-input>
                <el-input size="mini" v-model="seachForm.styleName" clearable placeholder="风格" @keydown.enter.native="seachData"></el-input>
                <el-button size="mini" icon="el-icon-search" @click="seachData"></el-button>
            </div>
            <div class="seach" v-if="activeName == 'stkRecord'">
                <el-input size="mini" v-model="totalRecordForm.itemCode" clearable placeholder="款号" @keydown.enter.native="totalStkRecordGet"></el-input>
                <el-input size="mini" v-model="totalRecordForm.bomCode" clearable placeholder="成品编码" @keydown.enter.native="totalStkRecordGet"></el-input>
                <el-input size="mini" v-model="totalRecordForm.size" clearable placeholder="尺码" @keydown.enter.native="totalStkRecordGet"></el-input>
                <el-input size="mini" v-model="totalRecordForm.title" clearable placeholder="标题" @keydown.enter.native="totalStkRecordGet"></el-input>
                <el-input size="mini" v-model="totalRecordForm.styleName" clearable placeholder="风格" @keydown.enter.native="totalStkRecordGet"></el-input>
                <el-button size="mini" icon="el-icon-search" @click="totalStkRecordGet"></el-button>
            </div>
            <div class="btnList">
                <el-button size="mini" @click="addDialogVisible = true">{{$t('add')}}</el-button>
            </div>
        </div>
        <el-tabs v-model="activeName" type="card" @tab-click="saveActive">
            <el-tab-pane label="库存" name="stk">
                <el-card class="cardBox">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item>成品库存</el-breadcrumb-item>
                        <el-breadcrumb-item>库存列表</el-breadcrumb-item>
                    </el-breadcrumb>
                    <el-table style="width: 100%" ref="finshTable" :data="finshTab" stripe v-adaptive="{bottomOffset: 85}" height="100">
                        <el-table-column prop="bomCode" label="编码">
                        </el-table-column>
                        <el-table-column prop="type" label="类别">
                        </el-table-column>
                        <el-table-column prop="styleName" :label="$t('style')">
                        </el-table-column>
                        <el-table-column prop="itemCode" :label="$t('stylenum')">
                        </el-table-column>
                        <el-table-column prop="title" :label="$t('title')">
                        </el-table-column>
                        <el-table-column prop="size" label="尺码">
                        </el-table-column>
                        <el-table-column prop="colour" label="颜色">
                        </el-table-column>
                        <!-- <el-table-column prop="status" :label="$t('status')">
                            <template v-slot="scope">
                                <el-tag :type="scope.row.status === $t('shelves') ? 'success' : 'danger'" :effect="scope.row.status === $t('shelves') ? 'dark' : 'plain'" @click.stop="editState(scope.row)" size="mini">
                                    {{ scope.row.status }}
                                </el-tag>
                            </template>
                        </el-table-column> -->
                        <el-table-column prop="stock" label="总库存">
                        </el-table-column>
                        <el-table-column prop="address" :label="$t('details')" width="200" fixed="right">
                            <template v-slot="scope">
                                <el-button @click="showView(scope.row)" size="mini">查看</el-button>
                                <el-button @click="showRecord(scope.row.id)" size="mini">库存变动</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        small
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :pager-count="11"
                        :current-page.sync="seachForm.pageNo"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="seachForm.pageSize"
                        layout="sizes, prev, pager, next"
                        :total="total">
                    </el-pagination>
                </el-card>
            </el-tab-pane>
            <el-tab-pane label="变动明细" name="stkRecord">
                <el-card class="cardBox">、
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item>成品库存</el-breadcrumb-item>
                        <el-breadcrumb-item>变动明细</el-breadcrumb-item>
                    </el-breadcrumb>
                    <el-table :data="totalRecordTab">
                        <el-table-column property="bomCode" label="编码"></el-table-column>
                        <el-table-column property="productName" label="名称"></el-table-column>
                        <el-table-column property="itemCode" label="款号"></el-table-column>
                        <el-table-column property="title" label="标题"></el-table-column>
                        <el-table-column property="colour" label="颜色"></el-table-column>
                        <el-table-column property="size" label="尺码"></el-table-column>
                        <el-table-column property="whName" label="仓库名"></el-table-column>
                        <el-table-column property="operateType" label="操作类型"></el-table-column>
                        <el-table-column property="qty" label="数量"></el-table-column>
                        <el-table-column property="operaterName" label="操作人"></el-table-column>
                        <el-table-column property="createTime" label="时间"></el-table-column>
                    </el-table>
                    <el-pagination
                        small
                        @size-change="handleTotalRecordSizeChange"
                        @current-change="handleTotalRecordCurrentChange"
                        :pager-count="11"
                        :current-page.sync="totalRecordForm.pageNo"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="totalRecordForm.pageSize"
                        layout="sizes, prev, pager, next"
                        :total="tRecordTotal">
                    </el-pagination>
                </el-card>
            </el-tab-pane>
        </el-tabs>
        <!-- 添加 -->
        <el-dialog :title="$t('add')" :visible.sync="addDialogVisible" width="550px" class="smallDlog" :close-on-click-modal="false" @close="addDlogClose(addDataForm)">
            <el-form :model="addDataForm" :rules="addRules" :ref="addDataForm" class="motuoForm">
                <el-form-item :label="$t('title')" label-width="80px" prop="title">
                    <el-input v-model="addDataForm.title" autocomplete="off" clearable :placeholder="$t('plsent')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('stylenum')" label-width="80px" prop="styleNum">
                    <el-input v-model="addDataForm.styleNum" autocomplete="off" clearable :placeholder="$t('plsent')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('category')" label-width="80px" prop="category">
                    <el-select v-model="addDataForm.category" clearable :placeholder="$t('plssel')">
                        <el-option :label="$t('bigrobe')" value="bigrobe"></el-option>
                        <el-option :label="$t('kaften')" value="kaften"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('style')" label-width="80px" prop="style">
                    <el-select v-model="addDataForm.style" clearable :placeholder="$t('plssel')">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('inventorydata')" label-width="80px" prop="inventory">
                    <el-input v-model="addDataForm.inventory" clearable autocomplete="off" :placeholder="$t('plsent')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('soldnumber')" label-width="80px" prop="soldNumber">
                    <el-input v-model="addDataForm.soldNumber" clearable autocomplete="off" :placeholder="$t('plsent')"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="addData(addDataForm)">{{$t('confirm')}}</el-button>
            </span>
        </el-dialog>
        <!-- 详情抽屉 -->
        <el-dialog title="详情" :visible.sync="defaultDlog" width="1000px" class="dftDlog" :close-on-click-modal="false" @close="defaultDlogClose">
            <el-card class="cardBox">
                <el-table style="width: 100%" ref="finishedDefaule" :data="finishedDefaule" stripe>
                    <el-table-column prop="bomCode" label="编码">
                    </el-table-column>
                    <el-table-column prop="type" label="类别">
                    </el-table-column>
                    <el-table-column prop="itemCode" label="款号">
                    </el-table-column>
                    <el-table-column prop="styleName" label="风格">
                    </el-table-column>
                    <el-table-column prop="title" :label="$t('title')">
                    </el-table-column>
                    <el-table-column prop="size" label="尺码">
                    </el-table-column>
                    <el-table-column prop="colour" label="颜色">
                    </el-table-column>
                    <el-table-column prop="stock" label="总库存">
                    </el-table-column>
                </el-table>
            </el-card>
            <div class="stockTab">
                <div class="stock-head">
                    <div class="head-title">库位</div>
                    <div class="head-title">库存数量</div>
                    <div class="head-title">出入库</div>
                </div>
                <div class="stock-content" v-for="item in finishedsStockTab" :key="item.whId">
                    <div class="content-data">{{item.whName}}</div>
                    <div class="content-data">{{item.qty}}</div>
                    <div class="content-data">
                        <el-button type="primary" @click="showPullOrPut(item)">出入库</el-button>
                    </div>
                </div>
            </div>
        </el-dialog>
        <!-- 出入库 -->
        <el-dialog title="出入库操作" :visible.sync="putorpullDialogVisible" width="500px" class="smallDlog" :close-on-click-modal="false" @close="putorpullDlogClose()">
            <el-form :model="updateFinished" :ref="updateFinished" :rules="updateFinishedRules" class="motuoForm">
                <el-form-item :label="$t('type')" label-width="70px" prop="qty">
                    <el-select v-model="stockType" :placeholder="$t('category')" clearable>
                        <el-option label="出库" :value="0"></el-option>
                        <el-option label="入库" :value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('number')" label-width="70px" prop="qty">
                    <el-input type="number" v-model="stockNum" clearable :placeholder="$t('plsent')"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="putorpullDialogVisible = false">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="putorpullData(updateFinished)">{{$t('confirm')}}</el-button>
            </span>
        </el-dialog>
        <!-- 单一记录 -->
        <el-dialog title="出入库记录" class="blockDlog" :visible.sync="recordDialogTableVisible">
            <el-table :data="recordTab">
                <el-table-column property="operaterName" label="操作人"></el-table-column>
                <el-table-column property="operateType" label="操作类型"></el-table-column>
                <el-table-column property="qty" label="数量"></el-table-column>
                <el-table-column property="createTime" label="时间"></el-table-column>
            </el-table>
            <el-pagination
                small
                @size-change="handleRecordSizeChange"
                @current-change="handleRecordCurrentChange"
                :pager-count="11"
                :current-page.sync="recordForm.pageNo"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="recordForm.pageSize"
                layout="sizes, prev, pager, next"
                :total="recordTotal">
            </el-pagination>
        </el-dialog>
    </div>
</template>

<script>
import {
    getStkProductList,
    getStkProductDetail,
    intostk,
    stockChangeRecord,
    wholeStkRecord
} from '@/libs/reqlist.js'
import Cookie from 'js-cookie'
export default {
    data () {
        let isNumberVlidator = (rule, value, callback) => {
            let pattern = /^([0-9]*[1-9][0-9])?$/
            if (!pattern.test(value)) {
                return callback(new Error(this.$t('plsentthenums')))
            } else {
                callback()
            }
        }
        return {
            activeName: 'stk',
            type: '',
            total: 0,
            seachForm: {
                pageNo: 1,
                pageSize: 10,
                itemCode: '',
                bomCode: '',
                colour: '',
                title: '',
                styleName: ''
            },
            finshTab: [],
            addDialogVisible: false,
            addDataForm: {
                title: '',
                styleNum: '',
                category: '',
                style: '',
                inventory: '',
                soldNumber: ''
            },
            addRules: {
                title: [
                    { required: true, message: this.$t('cannotbeemp'), trigger: 'blur' }
                ],
                styleNum: [
                    { required: true, message: this.$t('cannotbeemp'), trigger: 'blur' }
                ],
                category: [
                    { required: true, message: this.$t('cannotbeemp'), trigger: 'change' }
                ],
                style: [
                    { required: true, message: this.$t('cannotbeemp'), trigger: 'change' }
                ],
                inventory: [
                    { required: true, message: this.$t('cannotbeemp'), trigger: 'blur' },
                    { validator: isNumberVlidator, trigger: 'blur' }
                ],
                soldNumber: [
                    { required: true, message: this.$t('cannotbeemp'), trigger: 'blur' },
                    { validator: isNumberVlidator, trigger: 'blur' }
                ]
            },
            // 详情
            defaultDlog: false,
            finishedDefaule: [],
            finishedsStockTab: [],
            // 出入库
            putorpullDialogVisible: false,
            stockType: '',
            stockNum: '',
            updateFinished: {
                qty: '',	
                uuid: '',
                productId: '',
                whId: '',
                userId: ''
            },
            myStockNum: 0,
            updateFinishedRules: {},
            // 出入库记录
            recordForm: {
                productId: '',
                pageNo: 1,
                pageSize: 10
            },
            recordDialogTableVisible: false,
            recordTotal: 0,
            recordTab: [],
            // 总库存变动
            totalRecordTab: [],
            tRecordTotal: 0,
            totalRecordForm: {
                pageNo: 1,
                pageSize: 10,
                itemCode: '',
                bomCode: '',
                title: '',
                size: '',
                styleName: ''
            }
        }
    },
    methods: {
        saveActive() {
            switch (this.activeName) {
                case 'stk':
                    this.totalRecordForm.itemCode = ''
                    this.totalRecordForm.bomCode = ''
                    this.totalRecordForm.size = ''
                    this.totalRecordForm.styleName = ''
                    this.totalRecordForm.title = ''
                    this.totalRecordForm.pageNo = 1
                    this.totalRecordForm.pageSize = 10
                    this.seachData()
                    break
                case 'stkRecord':
                    this.seachForm.pageNo = 1
                    this.seachForm.pageSize = 10
                    this.seachForm.itemCode = ''
                    this.seachForm.bomCode = ''
                    this.seachForm.colour = ''
                    this.seachForm.title = ''
                    this.seachForm.styleName = ''
                    this.totalStkRecordGet()
                    break
            }
        },
        seachData () {
            getStkProductList(JSON.stringify(this.seachForm)).then(res => {
                if (res.data.code == 0) {
                    res.data.data.data.forEach(item => {
                        switch (item.type) {
                            case 0:
                                item.type = '大袍'
                                break
                            case 1:
                                item.type = 'kaften'
                                break
                        }
                    })
                    this.finshTab = res.data.data.data
                    this.total = res.data.data.hits
                }
            })
        },
        handleSizeChange (newSize) {
            this.seachForm.pageSize = newSize
            this.seachData()
        },
        handleCurrentChange (newNum) {
            this.seachForm.pageNo = newNum
            this.seachData()
        },
        handleSelectionChange (select) {
            this.selTabData = select
        },
        addDlogClose (form) {
            this.$refs[form].resetFields()
        },
        addData (form) {
            this.$refs[form].validate(valid => {
                if (!valid) return
                this.$message({
                    type: 'success',
                    message: this.$t('sucadd')
                })
                this.addDialogVisible = false
            })
        },
        // 详情
        showView(item) {
            this.finishedDefaule.push(item)
            this.updateFinished.productId = item.id
            this.getDftStock()
            this.defaultDlog = true
        },
        // 详细库存数据
        getDftStock() {
            getStkProductDetail(JSON.stringify({ productId: this.updateFinished.productId })).then(res => {
                if (res.data.code == 0) {
                    this.finishedsStockTab = res.data.data
                }
            })
        },
        defaultDlogClose() {
            this.finishedDefaule = []
        },
        // 出入库
        showPullOrPut(item) {
            this.updateFinished.userId = Cookie.get('sysUserID') - 0
            this.updateFinished.whId = item.whId
            this.updateFinished.uuid = item.uuid
            this.myStockNum = item.qty
            this.putorpullDialogVisible = true
        },
        putorpullData() {
            switch (this.stockType) {
                case 0:
                    if (this.myStockNum - this.stockNum < 0) return this.$message.warning('库存数量不足')
                    this.updateFinished.qty = 0 - this.stockNum
                    break
                case 1:
                    this.updateFinished.qty = this.stockNum - 0
                    break
            }
            if (this.stockType === '') return this.$message.warning('请先选择操作类型')
            if (this.updateFinished.qty == '') return this.$message.warning('请填写出入库数量')
            intostk(JSON.stringify(this.updateFinished)).then(res => {
                if (res.data.code == 0) {
                    this.putorpullDialogVisible = false
                    this.$message.success('操作成功')
                    this.getDftStock()
                }
            })
        },
        putorpullDlogClose() {
            this.stockType = ''
            this.stockNum = ''
            this.updateFinished.qty = ''
            this.updateFinished.uuid = ''
            this.updateFinished.whId = ''
            this.updateFinished.userId = ''
        },
        showRecord(id) {
            this.recordForm.productId = id
            stockChangeRecord(JSON.stringify(this.recordForm)).then(res => {
                if (res.data.code == 0) {
                    this.recordTotal = res.data.data.hits
                    res.data.data.data.forEach(item => {
                        switch (item.operateType) {
                            case 0:
                                item.operateType = '出库'
                                break
                            case 1:
                                item.operateType = '入库'
                                break
                        }
                    })
                    this.recordTab = res.data.data.data
                    this.recordDialogTableVisible = true
                }
            })
        },
        handleRecordSizeChange (newSize) {
            this.recordForm.pageSize = newSize
            this.showRecord()
        },
        handleRecordCurrentChange (newNum) {
            this.recordForm.pageNo = newNum
            this.showRecord()
        },
        // 库存总变动
        totalStkRecordGet() {
            wholeStkRecord(JSON.stringify(this.totalRecordForm)).then(res => {
                if (res.data.code == 0) {
                    res.data.data.data.forEach(item => {
                        switch (item.operateType) {
                            case 0:
                                item.operateType = '出库'
                                break
                            case 1:
                                item.operateType = '入库'
                                break
                        }
                    })
                    this.totalRecordTab = res.data.data.data
                    this.tRecordTotal = res.data.data.hits
                }
            })
        },
        seachStkRecord() {
            this.totalRecordForm.pageNo = 1
            this.totalStkRecordGet()
        },
        handleTotalRecordSizeChange (newSize) {
            this.totalRecordForm.pageSize = newSize
            this.totalStkRecordGet()
        },
        handleTotalRecordCurrentChange (newNum) {
            this.totalRecordForm.pageNo = newNum
            this.totalStkRecordGet()
        }
    },
    mounted() {
        this.seachData()
    }
}
</script>

<style lang="less" scoped>
@import './finished.less';
</style>
